<%layout("/common/layout.html"){%>

<div class="container">
    <article class="row">
        <section class="col-md-3 ds-upload">
            <ul class="nav nav-tabs">
                <li role="presentation">
                    <a href="">添加/上传图片</a>
                </li>
            </ul>
            <div class="ds-btn-upload">
                <button class="btn btn-info" id="ds-upload">
                    <span class="glyphicon glyphicon-open"></span>
                    上传图片
                </button>
                <input type="file" name="ds-form-upload" id="f-upload" class="f-upload">

                <p class="ds-tip">
                    提示：为达到最佳效果，请上传高分辨率图片<br/>
                    文件类型：jpg,png
                </p>
            </div>
            <div class="ds-meta">
                <p class="ds-meta-head">
                    素材
                    <button class="btn btn-info ds-switch">
                        <span class="glyphicon glyphicon-refresh"></span>换一批
                    </button>
                </p>
                <ul>
                    <li>
                        <img src="images/switch.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/switch.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/switch.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/switch.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/switch.jpg" alt="" class="img-thumbnail">
                    </li>
                    <li>
                        <img src="images/switch.jpg" alt="" class="img-thumbnail">
                    </li>
                </ul>
            </div>
        </section>
        <section class="col-md-6 ds-t">
            <img src="images/t-prototype.jpg" alt="" class="t-prototype" style="width: 541;height: 615">

            <div class="ds-imgup-wrap">
                <img src="" alt="插入图片的位置" class="ds-imgup">
            </div>
            <canvas class="ds-canvas ds-whole" id="cv-whole" width="541" height="615"></canvas>
            <canvas class="ds-canvas ds-part" id="cv-part"></canvas>
        </section>
        <section class="col-md-3 ds-tools">
            <div class="ds-tool">
                <button class="btn btn-info" id="ds-save" title="保存">
                    <span class="glyphicon glyphicon-floppy-save"></span>
                </button>
                <button class="btn btn-info" id="ds-new" title="新建">
                    <spanglyphicon class="glyphicon glyphicon-repeat"></spanglyphicon>
                </button>
            </div>
        </section>
        <section class="panel panel-default add-desc">
            <p class="panel-heading ds-ph">
                很棒的设计！为它添加一些描述吧~
                <span class="glyphicon glyphicon-remove ds-cancel"></span>
            </p>
            <main class="panel-body">
                <div class="form-group clearfix">
                    <label for="ds-head" class="col-sm-2 control-label">标题</label>

                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="ds-head" placeholder="你的标题">
                    </div>
                </div>

                <div class="form-group clearfix">
                    <label for="ds-head" class="col-sm-2 control-label">分类</label>

                    <div class="col-sm-10">
                        <select id="ds-sort" class="form-control">
                            <%for(sort in sorts){%>
                            <option value="${sort.id}">${sort.name}</option>
                            <%}%>
                        </select>
                    </div>
                </div>


                <div class="form-group">
                    <label for="ds-desc" class="col-sm-2 control-label">描述</label>

                    <div class="col-sm-10">
                        <textarea class="ds-desc panel-body form-control" id="ds-desc"
                                  placeholder="说点什么呢......"></textarea>
                    </div>
                </div>
            </main>
            <button class="btn btn-success ds-finish">大功告成，发布去！</button>

        </section>
        <section class="de-loading">
            <!--loading...-->        
            <section class="submit-bar panel panel-info" style="display: none">
                <div class="panel-heading">
                    提示
                </div>
                <div class="panel-body">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 100%">提交中...</div>
                    </div>
                </div>
            </section>

            <!--clear...-->        
            <section class="submit-clear panel panel-info" style="display: none">
                <div class="panel-heading">
                    提示
                </div>
                <div class="panel-body">
                    <div class="row">
                        <h2>提交成功!</h2>
                    </div>
                </div>
                <div class="panel-footer">
                    <a type="button" href="" class="btn btn-success" data-dismiss="modal">继续添加</a>
                    <a type="button" href="" class="btn btn-info go-img">去看看</a>
                </div>
            </section>

            <section class="submit-fail panel panel-info" style="display: none">
                <div class="panel-heading">
                    提示
                    <span class="glyphicon glyphicon-remove fail-close pull-right"></span>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <h2>提交失败</h2>
                    </div>
                </div>
                <div class="panel-footer">
                    <button type="button" class="de-fail btn btn-default" data-dismiss="modal">重试</button>
                </div>
            </section>
        </section>
    </article>
</div>

<link rel="stylesheet" type="text/css" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="${ctxPath}/js/jquery-2.1.1.min.js"></script>
<script src="${ctxPath}/js/jquery-ui.min.js"></script>
<script src="${ctxPath}/js/nav.js"></script>
<script src="${ctxPath}/js/ds.js"></script>
</body>
<%}%>